import React, { useEffect, useState } from 'react';

import { Toast } from 'antd-mobile';

/**
 * 手机号登录
 * @param {*} props 
 * @returns 
 */
function MobileTone(props) {

    const { 
        doLogin, ckboxTab, setCkboxTab,
        loginTab, loginName, setLoginName, validCode, setValidCode
    }  = props;
    
    // 获取验证状态
    const [ codeTab, setCodeTab ] = useState(false);
    
    // 登录按钮禁用状态
    const [ disableBtn, setDisableBtn ] = useState(true);
    // 正在操作的 输入框
    const [ currentName, setCurrentName ] = useState('');
    const [ txtCodeTime, setTxtCodeTime ] = useState('获取验证码');
    
    useEffect(()=> {} ,[ txtCodeTime ]);
    useEffect(()=> {} ,[ currentName ]);
    useEffect(()=> {} ,[ loginTab, loginName, codeTab, ckboxTab ]);
    
    const handleName = (event, name) => {
        let value = event.target.value;
        if ('loginName' === name) {
            if(loginTab && value) {
                value = value.length > 10 ? value.substring(0, 11) : value;
                if(/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(value)) {
                    setCodeTab(true)
                } else {
                    setCodeTab(false);
                }
            }
            setLoginName(value);
        }
        if('validCode' === name) { 
            if(loginTab && value) {
                value = value.length > 5 ? value.substring(0, 6) : value;
            }
            setValidCode(value); 
        }

        if (loginName && validCode) {
            setDisableBtn(false);
        } else {
            setDisableBtn(true);
        }
    }

    const doClear = (name) => {
        if ('loginName' === name) { setLoginName(''); }
        if ('validCode' === name) { setValidCode(''); }
        setDisableBtn(true);
    }

    const getCode = () => {
        if(!codeTab) {
            if(!loginName) { Toast.show({ content: '请输入手机号码' }); }
            return;
        }
        if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(loginName))) {
            Toast.show({ content: '请输入正确手机号' });
            return;
        }

        let idx = 60;
        const intervalId = setInterval(() => {
            setCodeTab(false);
            setTxtCodeTime(idx + 's 后重新获取');
            idx--;
            if(idx <=0) {
                clearInterval(intervalId);
                setCodeTab(false);
                setTxtCodeTime('获取验证码');
            }
        }, 1000);
    }

    return (
        <div className='w-login-form w-form-style'>
            <div className='w-login-user'>
                <div className='w-int-item'>
                    <input 
                        type='number' 
                        name='loginName' 
                        value={loginName}
                        onFocus={(e) => setCurrentName(e.target.name)}
                        onChange={(e)=> handleName(e, 'loginName')} autoComplete="off" placeholder='请输入手机号'
                    />
                    <span className='w-int-del w-form-style' style={{display: currentName === 'loginName' ? '' : 'none'}}
                        onClick={()=> doClear('loginName')}/>
                </div>
                <span className={`w-int-divide${loginName && loginName.length > 0 ? ' w-int-animate' : ''}`}/>
            </div>

            <div className='w-login-pwd' style={{ paddingTop: '.2rem'}}>
                <div className='w-int-item' style={{marginRight: '.1rem'}}>
                    <input 
                        type='number' 
                        name='validCode' 
                        value={validCode}
                        onFocus={(e) => setCurrentName(e.target.name)}
                        onChange={(e)=> handleName(e, 'validCode')} autoComplete="off" placeholder='请输入验证码'/>
                    <span className='w-int-del w-form-style' style={{display: currentName === 'validCode' ? '' : 'none'}}
                        onClick={()=> doClear('validCode')} />
                </div>
                <div className={`w-int-code${ codeTab ? '' : ' w-int-uncode'}`}
                    onClick={()=> getCode()}>{txtCodeTime}</div>
                <span className={`w-int-divide${validCode && validCode.length > 0 ? ' w-int-animate' : ''}`}/>
            </div>

            <div className='w-lsettlement'>
                <span className={`w-lsett-ckbox${ckboxTab ? ' w-active' :'' }`} onClick={(e)=> setCkboxTab(!ckboxTab)}/>
                <span children='验证后自动注册,我已阅读并同意'/>
                <span>
                    <a href='http://www.mikle.edu/mikle_server.html'>《眯客平台服务协议》</a>
                    <a href='http://www.mikle.edu/settle/mikle_secret.html'>《眯客平台隐私协议》</a>
                    <a href='http://www.mikle.edu/mikle_pay.html'>《眯付通用户支付协议》</a>
                </span>
            </div>

            <div className='w-login-btn w-center'>
                <button className={`w-btn w-mk-btn w-wd_10 w-ris-dot2${disableBtn ? ' w-disable' : ''}`}
                    onClick={()=> doLogin()} style={{ fontSize: '.16rem' }}>登录</button>
            </div>

            
        </div>
    )
}
export default MobileTone;